<template>
    <div>
            <div class="canvers">
                <div id="left"></div>
                <div id="right"></div>
            </div>
            <h3>详情数据</h3>
            <el-table :data="informList" style="width: 100%">
                <el-table-column prop="name" label="住院部" width="180" />
                <el-table-column prop="server" label="本周服务医务数" width="180" />
                <el-table-column prop="money" label="金额" />
                <el-table-column prop="lastweek" label="上周金额" />
                <el-table-column prop="month" label="本月金额" />
                <el-table-column prop="chargeperson" label="审计人员" />
                <el-table-column prop="audit" label="负责人" />
            </el-table> 
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { computed } from '@vue/reactivity';
import { onMounted, watchEffect, ref } from 'vue';
import { useStore } from 'vuex'

const store = useStore()

 onMounted(async() => {
    const res = await store.dispatch('ware/A_information')
    
    // 柱状图
    const Chart = echarts.init(document.getElementById('left'))
    Chart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: store.state.ware.weightChart.type,
            source: store.state.ware.weightChart.data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    });

    // 饼图
    const Chart2 = echarts.init(document.getElementById('right'))
    Chart2.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: store.state.ware.departmentChart.type,
            top: '0',
            
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14
                },
                center:['center', '60%'],
                labelLine: {
                    show: false
                },
                data:store.state.ware.departmentChart.centerData 
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['45%', '60%'],
                center:['center', '60%'],
                labelLine: {
                    length: 30
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: store.state.ware.departmentChart.otherData 
            }
        ]
    })

    window.onresize = function () {
        Chart.resize();
        Chart2.resize();
    };
})

watchEffect(() => {
    store.dispatch('ware/A_information')



})

const weightChart = computed(() => {
    return store.state.ware.weightChart
})

const informList = computed(() => {
    return store.state.ware.information
})

</script>


<style scoped lang="scss">
.canvers {
    display: flex;
    justify-content: space-between;
    width: 100%;

    #left {
        width: 50%;
        height: 400px;
    }

    #right {
        width: 50%;
        height: 400px;
    }
}
</style>